
// 获取浏览器地址栏数据参数
const urlObj = myGetUrlVal();
console.log(urlObj);

// 调用函数 动态渲染生成页面
setPage();

// 放大镜
// glass();




// 使用 async 封装 异步 ajax 请求
async function setPage() {
    const response = await myPromiseJQueryAjax('../server/goods_detail.php', 'post', { goods_id: urlObj.goods_id }, 'json');

    console.log(response);

    // 向页面写入内容
    $('.container').html(`  
  <h2 class="panel-title">商品详细信息</h2>
   
   <div class="purchase">
     <div class="glass">
         <img class="media-object" src="${response.goods_big_logo}" alt="...">
         <div></div>
         <div></div>
     </div>
    <div class="text">
       <h4>${response.goods_name}</h4>
       <p>
         <i>价格</i>
         <span>${response.goods_price}</span>
       </p>
       
       <p style="position:relative">
         
         <button name="-" type="button" class="jian btn btn-default">-</button>
         <input name="num" value="1" class="num">
         <button name="+" type="button" class="jia btn btn-default">+</button>
       </p>
       <p>
         <a href="javascript:;" class="btn btn-warning btn-lg" role="button">立即购买</a>
         <a href="JavaScript:;" name="cart" class="btn btn-danger btn-lg" role="button">加入购物车</a>
       </p>
     </div>
</div>
   <ul class="xx">
     <li role="presentation" class="active"><a href="#">商品详细信息</a></li>
     <li role="presentation"><a href="#">商品参数信息</a></li>
     <li role="presentation"><a href="#">相关商品</a></li>
   </ul>
   <div>${response.goods_introduce}</div>
`);

// 放大镜
  $('.glass').hover(function(){
    console.log(111);
    $('.glass div:nth-of-type(1)').css({display:'block'});
    $('.glass div:nth-of-type(2)').css({display:'block'});
  },function(){
    $('.glass div:nth-of-type(1)').css({display:'none'});
    $('.glass div:nth-of-type(2)').css({display:'none'});
  })
  const glass = document.querySelector('.glass');
  const glassDiv = document.querySelector('.glass div:nth-of-type(1)');
  const glassshow = document.querySelector('.glass div:nth-of-type(2)');
  glassshow.style.backgroundImage = `url(${response.goods_big_logo})`;
let mW = glass.offsetLeft;
let mH = glass.offsetTop;
let bW = glass.clientWidth;
let bH = glass.clientHeight;
let sW = parseInt(window.getComputedStyle(glassDiv).width);
let sH = parseInt(window.getComputedStyle(glassDiv).height);


window.addEventListener('resize',function(){
    mW = glass.offsetLeft;
    mH = glass.offsetTop;
    bW = glass.clientWidth;
    bH = glass.clientHeight;
    sW = parseInt(window.getComputedStyle(glassDiv).width);
    sH = parseInt(window.getComputedStyle(glassDiv).height);

})
glass.addEventListener('mousemove',function(e){
    let x = e.pageX - mW - sW/2;
    let y = e.pageY - mH - sH/2;
    x = x<0 ? 0 : x ;
    y = y<0 ? 0 : y ;
    x = x > bW - sW ? bW - sW : x ;
    y = y > bH - sH ? bH - sH : y ;

    glassDiv.style.left = x + 'px';
    glassDiv.style.top = y + 'px';
    glassshow.style.backgroundPosition = `${-x*2}px ${-y*2}px`;

})


    $('.container').click(function (e) {

        if ($(e.target).attr('name') === "-") {
            let num = Number($('[name="num"]').val());

            num--;

            num = num < 1 ? 1 : num;

            $('[name="num"]').val(num);

        } else if ($(e.target).attr('name') === "+") {
            let num = Number($('[name="num"]').val());

            num++;

            num = num > response.goods_number ? response.goods_number : num;

            $('[name="num"]').val(num);


        } else if ($(e.target).attr('name') === "cart") {
            // 获取 cookie对象 
            const cookieObj = myGetCookie();
            console.log(cookieObj);

            // 判断 有没有登录

            if (cookieObj.login === undefined) {
                if (window.confirm('您还没有登录 点击确定跳转登录页面')) {
                    window.location.href = `./login.html?url=${window.location.href}`;

                }

            } else {

                let cart = localStorage.cart;

                if (cart === undefined) {

                    response.buy = true;

                    let num = Number($('[name="num"]').val());

                    if (!(num >= 1 && num <= response.goods_number)) {

                        window.alert(`您只能购买 1 - ${response.goods_number} 范围内的商品`);

                        return;
                    }

                    response.num = num;

                    localStorage.cart = JSON.stringify([response])

                } else {
                    cart = JSON.parse(cart);
                    console.log(cart);

                    if (cart.length === 0) {
                 
                        response.buy = true;

                        let num = Number($('[name="num"]').val());

                        if (!(num >= 1 && num <= response.goods_number)) {

                            // 弹出提示信息
                            window.alert(`您只能购买 1 - ${response.goods_number} 范围内的商品`);

                            return;
                        }

                        response.num = num;

                        cart.unshift(response);

                        localStorage.cart = JSON.stringify(cart);

                    } else {
                     
                        let bool = cart.some(function (item) {
                            return item.goods_id === response.goods_id;
                        })

                        console.log(bool);

                        if (bool === false) {
                            response.buy = true;

                            let num = Number($('[name="num"]').val());

                            if (!(num >= 1 && num <= response.goods_number)) {

                                window.alert(`您只能购买 1 - ${response.goods_number} 范围内的商品`);

                                return;
                            }

                            response.num = num;

                            cart.unshift(response);

                            localStorage.cart = JSON.stringify(cart);

                        } else {
                            for (let i = 0; i <= cart.length - 1; i++) {
                                if (cart[i].goods_id === response.goods_id) {
                                    let num = Number($('[name="num"]').val());

                                    if (cart[i].num + num > cart[i].goods_number) {
                                        window.alert(`您已经购买${cart[i].num}件商品 最多再买${cart[i].goods_number - cart[i].num}件商品`);

                                        return;
                                    }

                                    cart[i].num += num;

                                    localStorage.cart = JSON.stringify(cart);

                                    break;
                                }
                            }

                        }
                    }
                }


                window.location.href = './cart.html';

            }
        }
    })
}





